<template>
  <div class="bs-page-main">
    <div class="wish-list-info">
      <div class="main-box cart-main">
        <div class="txt">
          <h4>Shopping Bag</h4>
        </div>
      </div>
    </div>
    <div class="cart-main-box">
      <div class="main-box">
        <div v-if="source.length === 0" class="cart-empty">
          <p>Your cart is empty</p>
          <a href="">Shop Now</a>
        </div>
        <template v-else>
          <div class="cart-list">
            <div class="event-tip">
              <em>EVENT</em>
              <span
                >You have joined in the XX series earrings event: 2 pieces for
                $49</span
              >
            </div>
            <div class="cart-cell">
              <a href="javascript:" class="delete"></a>
              <div class="pic">
                <img src="/data/pic/ring2.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">Figure Slim Stacker Set</div>
                <div class="des">Material: 14ct Solid Yellow Gold</div>
                <div class="des">Occasion: Occasion1</div>
                <div class="add-count">
                  <div class="minus"></div>
                  <input type="text" />
                  <div class="add"></div>
                </div>
                <div class="price">$49.00</div>
              </div>
            </div>
            <div class="cart-cell">
              <a href="javascript:" class="delete"></a>
              <div class="pic">
                <img src="/data/pic/ring2.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">Figure Slim Stacker Set</div>
                <div class="des">Material: 14ct Solid Yellow Gold</div>
                <div class="des">Occasion: Occasion1</div>
                <div class="add-count">
                  <div class="minus"></div>
                  <input type="text" />
                  <div class="add"></div>
                </div>
                <div class="price">$49.00</div>
              </div>
            </div>
            <div class="sub-total"><span>(-$49.00)</span>Subtotal:$49.00</div>
          </div>
          <div class="cart-list nb">
            <div class="event-tip">
              <em>EVENT</em>
              <span
                >You have joined in the XX series earrings event: 2 pieces for
                $49</span
              >
            </div>
            <div class="cart-cell">
              <a href="javascript:" class="delete"></a>
              <div class="pic">
                <img src="/data/pic/ring2.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">Figure Slim Stacker Set</div>
                <div class="des">Material: 14ct Solid Yellow Gold</div>
                <div class="des">Occasion: Occasion1</div>
                <div class="fall"><i></i>FALL20%</div>
                <div class="add-count">
                  <div class="minus"></div>
                  <input type="text" />
                  <div class="add"></div>
                </div>
                <div class="price"><em>$49.00</em>$49.00</div>
              </div>
            </div>
            <div class="sub-total"><span>(-$49.00)</span>Subtotal:$49.00</div>
          </div>
          <div class="order-summary">
            <div class="o-t">Order Summary</div>
            <div class="summary-info">
              <div class="lb">Tax</div>
              <div class="val">FREE</div>
            </div>
            <div class="summary-info">
              <div class="lb">Shipping</div>
              <div class="val">- $60.00</div>
            </div>
            <div class="summary-info">
              <div class="lb">Discounts</div>
              <div class="val">
                <div class="vl"><span class="event">event</span>- $49.00</div>
                <div class="vl"><span class="fall">Fall20%</span>- $49.00</div>
              </div>
            </div>
            <div class="sub-total">
              <div class="total-t">
                <b>Subtotal</b>
                <b>$1,555.00</b>
              </div>
              <div class="btn">
                <a href="" class="check-out">CHECKOUT</a>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <div class="wish-count">
      <div class="main-box cart-line">
        <h3>You may also like</h3>
      </div>
    </div>

    <div class="item-list-box wish-lt">
      <div class="main-box">
        <ul class="item-list">
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring2.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring3.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring4.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring2.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="blank-div"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      showCartDialog: true,
      source: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.source.push(1);
    }, 1000);
  },
};
</script>
